<div class="views">
    <div class="viewCont">
        <div class="page pageContinfo">
            <div class="bannerBox">
                <div class="bannrCont" :class="[jobClassType]">
                    <div class="job__header__inner">
                        <h1 class="job__header__jobname"><a :href="headers.jobTransJapan"><img :src="headers.headerBackgroudPic" width="480" height="72"
                                alt=""></a>
                            <span class="job__header__jobname__role"><a :href="headers.jobTransEng"><img :src="headers.jobAttackTypePic" width="32"
                                    height="32" alt=""></a>{{headers.jobAttackType}}</span>
                        </h1>
                    </div>
                </div>
            </div>
            <div class="job__wrapper red">
                <div class="job__content">
                    <p class="job__update">最近更新: {{today}}</p>
                    <p class="job__notes__lv80caution" v-html="headers.jobTitleDescription">
                    </p>
                    <div class="job__content__wrapper">
                        <h2 class="job__title">技能 &middot; 特性</h2>
                        <div class="subTabNum">
                            <div class="roopBox roopBox8">
                                <h3 id="subTitle_0" class="job__sub_title">专用技能
                                    <span class="js__jobguide_new_or_update
                                        hide" style="display: inline;"></span>
                                </h3>
                                <div class="job_table">
                                    <div class="job_list job_tab_tit">
                                        <div class="job_item item8_0">
                                            <span>技能名称</span>
                                        </div>
                                        <div class="job_item item8_1">
                                            <span>习得<br />条件</span>
                                        </div>
                                        <div class="job_item item8_2">
                                            <span>种类</span>
                                        </div>
                                        <div class="job_item item8_3">
                                            <span>咏唱<br />时间</span>
                                        </div>
                                        <div class="job_item item8_4">
                                            <span>复唱<br />时间</span>
                                        </div>
                                        <div class="job_item item8_5">
                                            <span>消费</span>
                                        </div>
                                        <div class="job_item item8_6 flexitem">
                                            <span class="tspan">距离</span>
                                            <span class="tspan">范围</span>
                                        </div>
                                        <div class="job_item item8_7">
                                            <span>效果</span>
                                        </div>
                                        <div class="job_item item8_8">
                                            <span>变更内容</span>
                                        </div>
                                    </div>
                                    <div class="job_tbody" v-for="item in skills">
                                        <div :class="getSkillsHeaderCss(item.change)" v-if="item.change">
                                            <img :src="getSkillsCssImg(item.change)" width="62" height="16" alt=""/>
                                        </div>
                                        <div :class="getSkillsListCss(item.change)">
                                            <div class="job_tlist">
                                                <div class="job_titem item8_0">
                                                    <div class="skill_icon">
                                                        <img :src="item.pic" width="40" height="40" alt=""
                                                            :style="{'filter': /删除技能|删除特性/.test(item.change) ? 'grayscale(100%)' : ''}">
                                                    </div>
                                                    <p class="skill_txt">
                                                        <strong v-if="/删除技能|删除特性/.test(item.change)"><s class="skill_txt"
                                                                v-html=[item.name]></s></strong>
                                                        <strong v-if="!/删除技能|删除特性/.test(item.change)">
                                                            <div class="skill_txt" v-html=[item.name]></div>
                                                            <div class="des" v-if="item.ndes">通过特职任务获得</div>
                                                        </strong>
                                                    </p>
                                                </div>
                                                <div class="job_titem item8_1">
                                                    <div class="waper_icon">
                                                        <div class="oneno">
                                                            <div class="item" tabindex="0">
                                                                <img :src="item.tiurl" width="32" height="32"
                                                                    class="js__tooltip" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <p>{{item.lvl}}</p>
                                                </div>
                                                <div class="job_titem item8_2 itcent">
                                                    <p class="pcent">{{item.classification}}</p>
                                                </div>
                                                <div class="job_titem item8_3 itcent">
                                                    <p class="pcent">{{item.cast}}</p>
                                                </div>
                                                <div class="job_titem item8_4 itcent">
                                                    <p class="pcent">{{item.recast}}</p>
                                                </div>
                                                <div class="job_titem item8_5 itcent" v-html=[item.cost]>
                                                </div>
                                                <div class="job_titem item8_6 itflex">
                                                    <div class="pic_icon">
                                                        <img src="https://static.web.sdo.com/jijiamobile/pic/ff14/20170901battle/mC5EtjE993EXT5Eo_63j2lmWiM.png"
                                                            width="16" height="16" alt="" />
                                                        <span>{{item.distant}}m</span>
                                                    </div>
                                                    <div class="pic_icon">
                                                        <img :src="getRangeImage(item.rangeType)" width="16" height="16"
                                                            alt="" />
                                                        <span>{{item.range}}m</span>
                                                    </div>
                                                </div>
                                                <div class="job_titem item8_7">
                                                    <div class="job_des">
                                                        <div class="content" v-html=[item.content]>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="job_titem item8_8">
                                                    <div class="job_des">
                                                        <div class="content" v-html=[item.change]>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="job__notes">{{headers.footer1}}</p>
                            </div>
                        </div>

                        <div class="subTabNum" v-if="specialSkills">
                            <div class="roopBox roopBox8">
                                <h3 id="subTitle_4" class="job__sub_title">{{headers.specialSkillsName}} <span
                                        class="js__jobguide_new_or_update hide" style="display: inline;"> </span></h3>
                                <div class="job_table">
                                    <div class="job_list job_tab_tit">
                                        <div class="job_item item8_0">
                                            <span>技能名称</span>
                                        </div>
                                        <div class="job_item item8_1">
                                            <span>习得<br />条件</span>
                                        </div>
                                        <div class="job_item item8_2">
                                            <span>种类</span>
                                        </div>
                                        <div class="job_item item8_3">
                                            <span>咏唱<br />时间</span>
                                        </div>
                                        <div class="job_item item8_4">
                                            <span>复唱<br />时间</span>
                                        </div>
                                        <div class="job_item item8_5">
                                            <span>消费</span>
                                        </div>
                                        <div class="job_item item8_6 flexitem">
                                            <span class="tspan">距离</span>
                                            <span class="tspan">范围</span>
                                        </div>
                                        <div class="job_item item8_7">
                                            <span>效果</span>
                                        </div>
                                        <div class="job_item item8_8">
                                            <span>变更内容</span>
                                        </div>
                                    </div>
                                    <div class="job_tbody" v-for="item in specialSkills">
                                        <div :class="getSkillsHeaderCss(item.change)" v-if="item.change">
                                            <img :src="getSkillsCssImg(item.change)" width="62" height="16" alt=""/>
                                        </div>
                                        <div :class="getSkillsListCss(item.change)">
                                            <div class="job_tlist">
                                                <div class="job_titem item8_0">
                                                    <div class="skill_icon">
                                                        <img :src="item.pic" width="40" height="40" alt=""
                                                            :style="{'filter': /删除技能|删除特性/.test(item.change) ? 'grayscale(100%)' : ''}">
                                                    </div>
                                                    <p class="skill_txt">
                                                        <strong v-if="/删除技能|删除特性/.test(item.change)"><s class="skill_txt"
                                                                v-html=[item.name]></s></strong>
                                                        <strong v-if="!/删除技能|删除特性/.test(item.change)">
                                                            <div class="skill_txt" v-html=[item.name]></div>
                                                            <div class="des" v-if="item.ndes">通过特职任务获得</div>
                                                        </strong>
                                                    </p>
                                                </div>
                                                <div class="job_titem item8_1">
                                                    <div class="waper_icon">
                                                        <div class="oneno">
                                                            <div class="item" tabindex="0">
                                                                <img :src="item.tiurl" width="32" height="32"
                                                                    class="js__tooltip" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <p>{{item.lvl}}</p>
                                                </div>
                                                <div class="job_titem item8_2 itcent">
                                                    <p class="pcent">{{item.classification}}</p>
                                                </div>
                                                <div class="job_titem item8_3 itcent">
                                                    <p class="pcent">{{item.cast}}</p>
                                                </div>
                                                <div class="job_titem item8_4 itcent">
                                                    <p class="pcent">{{item.recast}}</p>
                                                </div>
                                                <div class="job_titem item8_5 itcent">
                                                    <p class="pcent">{{item.cost}}</p>
                                                </div>
                                                <div class="job_titem item8_6 itflex">
                                                    <div class="pic_icon">
                                                        <img src="https://static.web.sdo.com/jijiamobile/pic/ff14/20170901battle/mC5EtjE993EXT5Eo_63j2lmWiM.png"
                                                            width="16" height="16" alt="" />
                                                        <span>{{item.distant}}m</span>
                                                    </div>
                                                    <div class="pic_icon">
                                                        <img :src="getRangeImage(item.rangeType)" width="16" height="16"
                                                            alt="" />
                                                        <span>{{item.range}}m</span>
                                                    </div>
                                                </div>
                                                <div class="job_titem item8_7">
                                                    <div class="job_des">
                                                        <div class="content" v-html=[item.content]>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="job_titem item8_8">
                                                    <div class="job_des">
                                                        <div class="content" v-html=[item.change]>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="job__notes">{{headers.footer5}}</p>
                            </div>
                        </div>

                        <div class="subTabNum">
                            <div class="roopBox roopBox8">
                                <h3 id="subTitle_1" class="job__sub_title">职能技能 <span
                                        class="js__jobguide_new_or_update hide" style="display: inline;"> </span></h3>
                                <div class="job_txt">
                                    职能技能是根据职业和特职的区别所习得的各种技能。
                                </div>
                                <div class="job_table">
                                    <div class="job_list job_tab_tit">
                                        <div class="job_item item8_0">
                                            <span>技能名称</span>
                                        </div>
                                        <div class="job_item item8_1">
                                            <span>习得<br />条件</span>
                                        </div>
                                        <div class="job_item item8_2">
                                            <span>种类</span>
                                        </div>
                                        <div class="job_item item8_3">
                                            <span>咏唱<br />时间</span>
                                        </div>
                                        <div class="job_item item8_4">
                                            <span>复唱<br />时间</span>
                                        </div>
                                        <div class="job_item item8_5">
                                            <span>消费</span>
                                        </div>
                                        <div class="job_item item8_6 flexitem">
                                            <span class="tspan">距离</span>
                                            <span class="tspan">范围</span>
                                        </div>
                                        <div class="job_item item8_7">
                                            <span>效果</span>
                                        </div>
                                        <div class="job_item item8_8">
                                            <span>变更内容</span>
                                        </div>
                                    </div>
                                    <div class="job_tbody" v-for="item in roleSkills">
                                        <div :class="getSkillsHeaderCss(item.change)" v-if="item.change">
                                            <img :src="getSkillsCssImg(item.change)" width="62" height="16" alt=""/>
                                        </div>
                                        <div :class="getSkillsListCss(item.change)">
                                            <div class="job_tlist">
                                                <div class="job_titem item8_0">
                                                    <div class="skill_icon">
                                                        <img :src="item.pic" width="40" height="40" alt=""
                                                            :style="{'filter': /删除技能|删除特性/.test(item.change) ? 'grayscale(100%)' : ''}">
                                                    </div>
                                                    <p class="skill_txt">
                                                        <strong v-if="/删除技能|删除特性/.test(item.change)"><s class="skill_txt"
                                                                v-html=[item.name]></s></strong>
                                                        <strong v-if="!/删除技能|删除特性/.test(item.change)">
                                                            <div class="skill_txt" v-html=[item.name]></div>
                                                            <div class="des" v-if="item.ndes">通过特职任务获得</div>
                                                        </strong>
                                                    </p>
                                                </div>
                                                <div class="job_titem item8_1">
                                                    <div class="waper_icon">
                                                        <div class="oneHas">
                                                            <div class="item" tabindex="0"
                                                                v-for="itemIcon in item.ticon">
                                                                <img :src="itemIcon.url" width="32" height="32"
                                                                    class="js__tooltip" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <p>{{item.lvl}}</p>
                                                </div>
                                                <div class="job_titem item8_2 itcent">
                                                    <p class="pcent">{{item.classification}}</p>
                                                </div>
                                                <div class="job_titem item8_3 itcent">
                                                    <p class="pcent">{{item.cast}}</p>
                                                </div>
                                                <div class="job_titem item8_4 itcent">
                                                    <p class="pcent">{{item.recast}}</p>
                                                </div>
                                                <div class="job_titem item8_5 itcent">
                                                    <p class="pcent">{{item.cost}}</p>
                                                </div>
                                                <div class="job_titem item8_6 itflex">
                                                    <div class="pic_icon">
                                                        <img src="https://static.web.sdo.com/jijiamobile/pic/ff14/20170901battle/mC5EtjE993EXT5Eo_63j2lmWiM.png"
                                                            width="16" height="16" alt="" />
                                                        <span>{{item.distant}}m</span>
                                                    </div>
                                                    <div class="pic_icon">
                                                        <img :src="getRangeImage(item.rangeType)" width="16" height="16"
                                                            alt="" />
                                                        <span>{{item.range}}m</span>
                                                    </div>
                                                </div>
                                                <div class="job_titem item8_7">
                                                    <div class="job_des">
                                                        <div class="content" v-html=[item.content]>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="job_titem item8_8">
                                                    <div class="job_des">
                                                        <div class="content" v-html=[item.change]>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="job__notes">{{headers.footer2}}</p>
                            </div>
                        </div>

                        <div class="subTabNum">
                            <div class="roopBox roopBox3">
                                <h3 id="subTitle_2" class="job__sub_title">特性 <span
                                        class="js__jobguide_new_or_update hide" style="display: inline;"> </span></h3>
                                <div class="job_txt">
                                    
                                </div>
                                <div class="job_table">
                                    <div class="job_list job_tab_tit">
                                        <div class="job_item item3_0">
                                            <span>技能名称</span>
                                        </div>
                                        <div class="job_item item3_1">
                                            <span>习得<br />条件</span>
                                        </div>
                                        <div class="job_item item3_2">
                                            <span>效果</span>
                                        </div>
                                        <div class="job_item item3_3">
                                            <span>变更内容</span>
                                        </div>
                                    </div>
                                    <div class="job_tbody" v-for="item in traits">
                                        <div :class="getSkillsHeaderCss(item.change)" v-if="item.change">
                                            <img :src="getSkillsCssImg(item.change)" width="62" height="16" alt=""/>
                                        </div>
                                        <div :class="getSkillsListCss(item.change)">
                                            <div class="job_tlist">
                                                <div class="job_titem item3_0">
                                                    <div class="skill_icon">
                                                        <img :src="item.pic" width="40" height="40" alt=""
                                                            :style="{'filter': /删除技能|删除特性/.test(item.change) ? 'grayscale(100%)' : ''}">
                                                    </div>
                                                    <p class="skill_txt">
                                                        <strong v-if="/删除技能|删除特性/.test(item.change)"><s class="skill_txt"
                                                                v-html=[item.name]></s></strong>
                                                        <strong v-if="!/删除技能|删除特性/.test(item.change)">
                                                            <div class="skill_txt" v-html=[item.name]></div>
                                                            <div class="des" v-if="item.ndes">通过特职任务获得</div>
                                                        </strong>
                                                    </p>
                                                </div>
                                                <div class="job_titem item3_1">
                                                    <div class="waper_icon">
                                                        <div class="oneno" v-if="item.tiurl !== ''">
                                                            <div class="item" tabindex="0">
                                                                <img :src="item.tiurl" width="32" height="32"
                                                                    class="js__tooltip" />
                                                            </div>
                                                        </div>
                                                        <div class="oneHas" v-if="item.ticon !== ''">
                                                            <div class="item" tabindex="0"
                                                                v-for="itemIcon in item.ticon">
                                                                <img :src="itemIcon.url" width="32" height="32"
                                                                    class="js__tooltip" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <p>{{item.lvl}}</p>
                                                </div>
                                                <div class="job_titem item3_2">
                                                    <div class="job_des">
                                                        <div class="content" v-html=[item.content]>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="job_titem item3_3">
                                                    <div class="job_des">
                                                        <div class="content" v-html=[item.change]>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="job__notes">{{headers.footer3}}</p>
                            </div>
                        </div>

                        <div class="subTabNum">
                            <div class="roopBox roopBox3">
                                <h3 id="subTitle_3" class="job__sub_title">职能特性 <span
                                        class="js__jobguide_new_or_update hide" style="display: inline;"> </span></h3>
                                <div class="job_txt">
                                    职能特性是根据职业和特职的区别所习得的各种特性。
                                </div>
                                <div class="job_table">
                                    <div class="job_list job_tab_tit">
                                        <div class="job_item item3_0">
                                            <span>技能名称</span>
                                        </div>
                                        <div class="job_item item3_1">
                                            <span>习得<br />条件</span>
                                        </div>
                                        <div class="job_item item3_2">
                                            <span>效果</span>
                                        </div>
                                        <div class="job_item item3_3">
                                            <span>变更内容</span>
                                        </div>
                                    </div>
                                    <div class="job_tbody" v-for="item in roleTraits">
                                        <div :class="getSkillsHeaderCss(item.change)" v-if="item.change">
                                            <img :src="getSkillsCssImg(item.change)" width="62" height="16" alt=""/>
                                        </div>
                                        <div :class="getSkillsListCss(item.change)">
                                            <div class="job_tlist">
                                                <div class="job_titem item3_0">
                                                    <div class="skill_icon">
                                                        <img :src="item.pic" width="40" height="40" alt=""
                                                            :style="{'filter': /删除技能|删除特性/.test(item.change) ? 'grayscale(100%)' : ''}">
                                                    </div>
                                                    <p class="skill_txt">
                                                        <strong v-if="/删除技能|删除特性/.test(item.change)"><s class="skill_txt"
                                                                v-html=[item.name]></s></strong>
                                                        <strong v-if="!/删除技能|删除特性/.test(item.change)">
                                                            <div class="skill_txt" v-html=[item.name]></div>
                                                            <div class="des" v-if="item.ndes">通过特职任务获得</div>
                                                        </strong>
                                                    </p>
                                                </div>
                                                <div class="job_titem item3_1">
                                                    <div class="waper_icon">
                                                        <div class="oneHas">
                                                            <div class="item" tabindex="0"
                                                                v-for="itemIcon in item.ticon">
                                                                <img :src="itemIcon.url" width="32" height="32"
                                                                    class="js__tooltip" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <p>{{item.lvl}}</p>
                                                </div>
                                                <div class="job_titem item3_2">
                                                    <div class="job_des">
                                                        <div class="content" v-html=[item.content]>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="job_titem item3_3">
                                                    <div class="job_des">
                                                        <div class="content" v-html=[item.change]>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="job__notes">{{headers.footer4}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>